
			ul.counter li img {float:left;margin-right:20px}
			ul.counter
			{
			    position:relative;
			    display:block;
				list-style: none;
				counter-reset: li; /* reset counter for ol (li is just arbitrary identifier) */
				padding-left:30px;
			}
			

			ul.counter li
			{
			    display:block;
				position:relative;
				margin-bottom: 5px; /* bottom spacing between lis */
				padding: 4px 10px;
				clear:both;
			}

			ul.counter ul.counter{
				margin-top: 1em; /* for nested ols, add top and bottom spacing */
				margin-bottom: -10px;
			}

			ul.counter > li:before{ /* pseudo element for custom counter */
				content:counter(li); /* set its content to CSS generated counter, using the "li" counter defined above */
				counter-increment:li; /* increment the li counter each time, assumed starting index is 0 */
				text-align: center;
				display:block;
				position:absolute;
				width: 27px; /* width of counter */
				height: 27px; /* height of counter */
				line-height: 27px; /* set this to same as height value */
				font-weight: bold;
				top:40px;
				left: -35px; /* shift counter to the left */
				background: #452b06; /* background of counter */
				color: white;
				z-index: 10000;
				-moz-box-shadow: 2px 2px 4px gray; /* CSS3 shadows */
				-webkit-shadow: 2px 2px 4px gray;
				box-shadow: 2px 2px 4px gray;
			}

			ul.counter ul.counter > li:before{ /* 2nd level custom counter specific style */
				background: darkred;
				border-radius: 8px;
			}

			ul.counter ul.counter ul.counter > li:before{ /* 3rd level custom counter specific style */
				background: red;
				border-radius: 27px;
			}
			
			.counter img
			{
			    width:100px;
			    height: auto;
			    max-height:90px;
			}